<script setup lang="ts">
  import AppIcon from '@/components/common/app/AppIcon.vue';
  import { useRedo } from '@/hooks/router';
  import { isDark } from '@/hooks/core/useToggleDark';
  import { useLocale } from '@/locales/useLocale';
  import { useFullscreen } from '@vueuse/core';
  import { IToolDropMenu } from '@/components/types';
  import { useMultipleTabsTool } from '@/hooks/core/useMultipleTabs';
  import { useRoute, useRouter } from 'vue-router';
  const { t } = useLocale();
  const route = useRoute();
  const router = useRouter();
  const redo = useRedo();
  const { toggle: toggleFullscreen, isFullscreen } = useFullscreen();
  const { commandFn, toolDropMenu } = useMultipleTabsTool(route, router);
</script>

<template>
  <div class="flex items-center justify-around mx-1 lg:mr-1 ml-0">
    <div
      @click="redo"
      class="cursor-pointer p-1.5 lg:py-2 lg:px-4 flex-justify-items-center border border-border-b dark:border-border-b-dark rounded-l"
    >
      <el-tooltip
        :content="t('message.layout.multipleTab.reload')"
        placement="bottom"
        :effect="isDark ? 'dark' : 'light'"
      >
        <AppIcon class="p-0 cursor-pointer" icon="charm:refresh" />
      </el-tooltip>
    </div>
    <el-dropdown trigger="click" @command="commandFn">
      <div
        class="cursor-pointer p-1.5 lg:py-2 lg:px-4 flex-justify-items-center border-y border-border-b dark:border-border-b-dark"
      >
        <AppIcon
          class="p-0 !text-base text-main-text dark:text-main-text-dark"
          icon="akar-icons:chevron-down"
        />
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="item in toolDropMenu"
            :key="item.title"
            :divided="item.divided"
            :command="item.command"
            :disabled="item.disabled"
          >
            <AppIcon :icon="item.icon" />
            <span>{{ t(item.title) }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div
      @click="toggleFullscreen"
      class="cursor-pointer p-1.5 lg:py-2 lg:px-4 flex-justify-items-center border border-border-b dark:border-border-b-dark rounded-r"
    >
      <el-tooltip
        :content="
          t(
            isFullscreen
              ? 'message.layout.header.tooltipExitFull'
              : 'message.layout.header.tooltipEntryFull'
          )
        "
        placement="bottom"
        :effect="isDark ? 'dark' : 'light'"
      >
        <AppIcon v-if="!isFullscreen" class="p-0" icon="codicon:screen-full" />
        <AppIcon v-else class="p-0" icon="bi:fullscreen-exit" />
      </el-tooltip>
    </div>
  </div>
</template>

<style lang="scss"></style>
